<template>
  <div class="category-main">
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <h4>乐居分类:</h4>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col v-for="item in lejuList" :key="item.id" :span="6" :offset="0">
            <el-card shadow="never" :body-style="{ padding: '20px' }">
              <div slot="header">
                <span>{{ item.name }}</span>
              </div>
              <div>
                <el-upload
                  class="avatar-uploader"
                  :action="uploadFileOss"
                  :headers="token"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="item.icon" :src="item.icon" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div>
        <!-- 全部分类 -->
        <h4>全部分类</h4>
        <el-table
          :data="categoryItems"
          row-key="id"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="name"
            label="菜单名称"
            width="150"
          />
          <el-table-column
            label="icon"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-image style="width: 60px; height: 60px;" :src="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="分类名字"
            align="center"
          />
          <el-table-column
            prop="sort"
            label="排序"
            align="center"
          />
          <el-table-column
            prop="address"
            label="显示状态"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-show="scope.row.showStatus==1" type="success">显示</el-tag>
              <el-tag v-show="scope.row.showStatus==0" type="info">不显示</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="导航栏展示"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-show="scope.row.navStatus==1" type="success">展示</el-tag>
              <el-tag v-show="scope.row.navStatus==0" type="info">不展示</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          />
        </el-table>
      </div>
    </el-card>

  </div>
</template>

<script>
import mix from '@/mixins'

export default {
  name: 'VueAdminTemplateMasterIndex',
  mixins: [mix],
  data() {
    return {
    }
  },

  mounted() {
    this.getAllCategory()
  },

  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/webg'
      const isLt2M = file.size / 1024 / 1024 < 1.5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1.5MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 260px;
    height: 260px;
    line-height: 260px;
    text-align: center;
  }
  .avatar {
    width: 260px;
    height: 260px;
    display: block;
  }
</style>
